<!-- src\components\Home.vue -->
<template>
	<div class="basic-layout">
		<!-- 左侧菜单 -->
		<div :class="['nav-side', isCollapse ? 'fold' : 'expand']">
			<!-- 系统logo -->
			<div class="logo">
				<img src="../assets/images/logo.png" alt="" />
				<span>Manager</span>
			</div>
			<!-- 导航菜单 -->
			<el-menu
				:default-active="route.path"
				class="el-menu-vertical-demo"
				background-color="#001529"
				:collapse="isCollapse"
				text-color="#fff"
				@open="handleOpen"
				@close="handleClose"
				router
			>
				<!-- 把之前定义好的数据, 传给子组件 -->
				<tree-menu :userMenu="userMenu" />
			</el-menu>
		</div>
		<div :class="['content-right', isCollapse ? 'fold' : 'expand']">
			<div class="nav-top">
				<div class="nav-left">
					<!-- 添加点击事件 -->
					<el-icon v-show="!isCollapse" @click="toggle" class="nav-flod-expand-icon"><Fold /></el-icon>
					<el-icon v-show="isCollapse" @click="toggle" class="nav-flod-expand-icon"><Expand /></el-icon>
					<div class="bread"><bread-crumb /></div>
				</div>
				<div class="user-info">
					<!-- 通知图标start, danger是红色 -->
					<el-badge :is-dot="Boolean(noticeCount)" class="notice" type="danger">
						<el-icon><Bell /></el-icon>
					</el-badge>
					<!-- 通知图标end -->
					<!-- 下拉菜单 start -->
					<el-dropdown @command="handleCommand">
						<!-- 自定义类名 -->
						<span class="user-link">
							{{ userInfo.userName }}
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="email">邮箱: {{ userInfo.userEmail }}</el-dropdown-item>
								<el-dropdown-item command="logout">退出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<!-- 下拉菜单 end -->
				</div>
			</div>
			<div class="wrapper">
				<div class="main-page">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { Promotion, Setting, Fold, Bell, Expand } from "@element-plus/icons-vue";
import { ref, reactive } from "@vue/reactivity";
// 生命周期函数, 组件挂载后触发
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
// 导入api, 表单验证成功后, 进行ajax请求
import api from "@/api";
import TreeMenu from "@/components/TreeMenu.vue";
import BreadCrumb from "./BreadCrumb.vue";
const store = useStore();
const router = useRouter();
const route = useRoute();
// 默认展开
const isCollapse = ref(false);
// 从vuex中获取用户信息
let userInfo = store.state.userInfo;
// 定义消息数量和消息状态
const noticeCount = ref(0);
// 定义左侧列表
const userMenu = ref([]);
// 组件挂载之后触发
onMounted(() => {
	// 自动触发获取消息数量函数
	getNoticeCount();
	// 获取菜单列表
	getMenuList();
});
const handleOpen = (key, keyPath) => {
};
const handleClose = (key, keyPath) => {
};
// 定义点击事件
const handleCommand = (key) => {
	if (key === "email") {
		return false;
	}
	// 退出操作
	if (key === "logout") {
		// 清掉vuex里面的数据
		store.commit("removeUserInfo");
		// 清除掉当前的userInfo
		userInfo = null;
		// 跳转登录页
		router.push("/login");
	}
};
// 侧边栏展开折叠
const toggle = () => {
	isCollapse.value = !isCollapse.value;
};
// 获取消息数量
function getNoticeCount() {
	// 走ajax, 获取消息数量
	api.noticeCount().then((res) => {
		// 更新noticeCount的数据
		noticeCount.value = res;
	});
}
// 获取菜单列表
function getMenuList() {
	// 走ajax, 获取菜单列表
	api.menuList().then((res) => {
		// 更新userMenu的数据
		userMenu.value = res;
	});
}
</script>
<style scoped lang="scss">
.basic-layout {
	// 左侧的导航栏
	.nav-side {
		position: fixed;
		width: 200px;
		// 折叠64
		&.fold {
			width: 64px;
		}
		// 展开200
		&.expand {
			width: 200px;
		}
		height: 100vh;
		background-color: #001529;
		// 字体白色
		color: #fff;
		// 垂直方向可以出现滚动条
		overflow-y: auto;
		// 过渡动画, 因为菜单可以打开关闭
		transition: width 0.5s;
		.logo {
			// 垂直居中, 不需要水平居中
			display: flex;
			align-items: center;
			font-size: 18px;
			// 设置高度
			height: 50px;
			// 设置图片
			img {
				width: 32px;
				height: 32px;
				margin: 0 16px;
			}
		}
		.el-menu {
			border-right: none;
		}
	}
	.content-right {
		// 过渡动画, 因为菜单可以打开关闭
		transition: margin-left 0.5s;
		// 左侧的侧边栏是200px宽, 所以需要这么设置, 给左侧腾出位置
		// 因为左侧的侧边栏将来可以收起来, 所以后期还需要调整
		margin-left: 200px;
		// 折叠时, 距离左边的距离
		&.fold {
			margin-left: 64px;
		}
		// 展开时, 距离左边的距离
		&.expand {
			margin-left: 200px;
		}
		.nav-top {
			height: 50px;
			line-height: 50px;
			// 内容通常需要左右两边对齐
			display: flex;
			justify-content: space-between;
			// 两边对齐之后, 往往有间距, 不是紧贴着左侧的侧边栏
			padding: 0 20px;
			// 做一个分割线
			border-bottom: 1px solid #ddd;
			// 面包屑和展开折叠按钮
			.nav-left {
				display: flex;
				// 垂直居中
				align-items: center;
				.nav-flod-expand-icon {
					margin-right: 15px;
					font-size: 18px;
				}
			}
			.user-info {
				display: flex;
				align-items: center;
				.notice {
					// 调整大小
					font-size: 22px;
					// 让小圆点离图标近一些
					line-height: 16px;
					margin-right: 16px;
				}
				&:hover {
					cursor: pointer;
				}
				.user-link {
					color: #409eff;
					font-weight: bold;
				}
			}
		}
		.wrapper {
			background-color: #eef0f3;
			padding: 20px;
			// 高度需要动态计算, 注意减号两边有空格
			height: calc(100vh - 50px);
			.main-page {
				height: 100%;
			}
		}
	}
}
</style>
